<template>
	<view class="body">
		<view class="top">
			<view class="first disC">
				<view class="li" @click="changeFirst(0)">
					<view class="">
						交易统计
					</view>
					<view :class="[index == 0 ? 'b' : 'a']"></view>
				</view>
				<view class="li" @click="changeFirst(1)">
					<view class="">
						出单排行
					</view>
					<view :class="[index == 1 ? 'b' : 'a']"></view>
				</view>
				<view class="li" @click="changeFirst(2)">
					<view class="">
						邀请排行
					</view>
					<view :class="[index == 2 ? 'b' : 'a']"></view>
				</view>
			</view>
			<view class="second disC" v-if="index == 0">
				<view @click="changeSecond(index)" v-for="(item,index) in stateList"
					:class="[indexS == index ? 'c' : '','li','start']">{{item}}</view>
			</view>
			<view class="second disC" v-if="index == 1 || index == 2">
				<view @click="changeSecond(index)" v-for="(item,index) in stateList2"
					:class="[indexS == index ? 'c' : '','li','start']">{{item}}</view>
			</view>
		</view>
		<view class="timeSelect" v-if="indexS == 3">
			<view class="li">
				<view class="lable">
					起始时间:
				</view>
				<picker mode="date" :value="startTime" fields='day' :start="startDate" :end="endDate"
					@change="bindDateChange">
					<view class="select_time">{{startTime}}</view>
				</picker>
			</view>
			<view class="li" v-if="index === 0 && indexS == 3">
				<view class="lable">
					结束时间:
				</view>
				<picker mode="date" :value="endTime" fields='day' :start="startDate" :end="endDate"
					@change="bindDateChange2">
					<view class="select_time">{{endTime}}</view>
				</picker>
			</view>
		</view>
		<view class="data_c" v-if="index === 0">
			<view class="li">
				<view class="">{{obj.cardTypeNumber}}</view>
				<view class="">卡种数量</view>
			</view>
			<view class="li">
				<view class="">{{obj.tradeNumber}}</view>
				<view class="">交易中</view>
			</view>
			<view class="li">
				<view class="">{{obj.completeNumber}}</view>
				<view class="">完成</view>
			</view>
			<view class="li">
				<view class="">{{obj.subsidyNumber}}</view>
				<view class="">补贴</view>
			</view>
		</view>
		<!-- 交易统计 -->
		<view class="table" v-if="index === 0">
			<view class="th">
				<view class="td a">
					卡券名称
				</view>
				<view class="td">
					数量
				</view>
				<view class="td">
					交易中
				</view>
				<view class="td">
					完成
				</view>
				<view class="td">
					补贴
				</view>
			</view>
			<view v-for="(item,index) in obj.tradeCards " :key='index' :class="[index % 2 == 0 ? 'bk' : '' ,'tr']">
				<view class="td a">
					{{item.cardName}}
				</view>
				<view class="td">
					{{item.cardNumber}}
				</view>
				<view class="td">
					{{item.tradeNumber}}
				</view>
				<view class="td">
					{{item.completeNumber}}
				</view>
				<view class="td">
					{{item.subsidyNumber}}
				</view>
			</view>
		</view>
		<!-- 出单排行 || 邀请排行 -->
		<view class="" v-if="index === 1 || index ===2">
			<view class="chu_dan">
				<view class="one item" v-if="list1.length>= 1">
					<view class="aravat">
						<image :src="list1[0].avatar" class="aravat_img"></image>
						<image src="../../static/image/one.png" mode="widthFix" class="pai"></image>
					</view>
					<view class="name">
						{{list1[0].nickName}}
					</view>
					<view class="detail">
						已完成<text class="red">{{list1[0].total}}</text>单
					</view>
				</view>
				<view class="two item" v-if="list1.length>= 2">
					<view class="aravat">
						<image :src="list1[1].avatar" class="aravat_img"></image>
						<image src="../../static/image/one.png" mode="widthFix" class="pai"></image>
					</view>
					<view class="name">
						{{list1[1].nickName}}
					</view>
					<view class="detail">
						已完成<text class="red">{{list1[1].total}}</text>单
					</view>
				</view>
				<view class="three item" v-if="list1.length>= 3">
					<view class="aravat">
						<image :src="list1[2].avatar" class="aravat_img"></image>
						<image src="../../static/image/one.png" mode="widthFix" class="pai"></image>
					</view>
					<view class="name">
						{{list1[2].nickName}}
					</view>
					<view class="detail">
						已完成<text class="red">{{list1[2].total}}</text>单
					</view>
				</view>
			</view>
			<view class="chudan_ul" v-if="list1.length > 3">
				<view v-for="(item,index) in list1" :key="index" :class="[index <= 2 ? 'none' : '','chudan_li']">
					<view class="index">
						{{index }}
					</view>
					<image src="../../static/image/three.png" mode="widthFix" class="aravat"></image>
					<view class="name">
						{{item.nickName}}
					</view>
					<view class="ready">
						已完成<text class="red">{{item.total}}</text>单
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import {
	log
} from 'util'
import {
	getorderRanking,
	inviteRanking,
	getTradeCount
} from '@/api.js'
export default {
	data () {
		const currentDate = this.getDate({
			format: true
		})
		const currentDate2 = this.getDate2({
			format: true
		})

		return {
			startTime: currentDate,
			endTime: currentDate2,
			index: 0,
			indexS: 0,
			stateList: ['今日', '本周', '本月', '自定义'],
			stateList2: ['本周', '本月', '上月'],
			list1: [], //出单排行
			obj: {}, //交易统计
		}
	},
	onLoad () {
		this.getList()
	},
	computed: {
		startDate () {
			return this.getDate('start');
		},
		endDate () {
			return this.getDate('end');
		}
	},
	methods: {
		changeFirst (index) {
			this.index = index
			this.indexS = 0
			this.list1 = []
			this.getList()
		},
		changeSecond (index) {
			this.indexS = index
			this.getList()
		},
		bindDateChange: function (e) {
			this.startTime = e.detail.value
			this.getList()
		},
		bindDateChange2 (e) {
			this.endTime = e.detail.value
			this.getList()
		},
		getDate (type) {
			const date = new Date();
			let year = date.getFullYear();
			let month = date.getMonth() + 1;
			let day = date.getDay();
			if (day == 1) {
				month = month - 1
				if (month == 1) {
					year = year - 1
				}
			} else {
				day = day - 1
			}
			console.log('day', day);
			if (type === 'start') {
				year = year - 5;
			} else if (type === 'end') {
				year = year;
			}
			month = month > 9 ? month : '0' + month;
			return `${year}-${month}-${day}`;
		},
		getDate2 (type) {
			const date = new Date();
			let year = date.getFullYear();
			let month = date.getMonth() + 1;
			let day = date.getDay();
			if (type === 'start') {
				year = year - 5;
			} else if (type === 'end') {
				year = year;
			}
			month = month > 9 ? month : '0' + month;
			return `${year}-${month}-${day}`;
		},
		async getList () {
			console.log('this.startTime', this.startTime);
			if (this.index === 0) {
				// 交易统计
				let obj = {
					timeType: this.indexS + 1,
					endTime: this.indexS == 3 ? this.endTime : '',
					startTime: this.indexS == 3 ? this.startTime : ''
				}
				console.log(obj);
				let res = await getTradeCount(
					obj
				)
				console.log('res', res);
				this.obj = res.result
			} else if (this.index === 1) {
				let res = await getorderRanking({
					timeType: this.indexS + 1
				})
				this.list1 = res.result
				// 出单排行
			} else if (this.index === 2) {
				let res = await inviteRanking({
					timeType: this.indexS + 1
				})
				this.list1 = res.result
				// 邀请排行
			}
		},
	}
}
</script>

<style scoped lang="scss">
.body {
	width: 750rpx;
	height: 100vh;
	background: #f9f9f9;


	.top {
		width: 750rpx;
		height: 140rpx;
		background: #fff;
		// padding-top: 40rpx;
		display: flex;
		flex-direction: column;
		// align-items: center;
		justify-content: space-between;

		.first {
			.li {
				text-align: center;
				width: 30%;

				.b {
					width: 100rpx;
					height: 4rpx;
					background: red;
					margin: 10rpx auto 0;
				}

				.a {
					width: 100rpx;
					height: 4rpx;
					background: #fff;
					margin: 10rpx auto 0;
				}
			}
		}

		.second {
			// position: absolute;
			// bottom: 0;
			overflow: hidden;
			/* 防止边框溢出 */
			padding: 1px;

			/* 补齐负边距导致的底部/右侧缺失 */
			.li {
				text-align: center;
				margin-left: -1rpx;
				// width: 20%;
				border: 1rpx solid #3c9cff;
				padding: 6rpx 30rpx;
				min-width: 110rpx;
			}

			.start {
				border-top-left-radius: 6rpx;
				border-bottom-left-radius: 6rpx;
			}

			.end {
				border-top-right-radius: 6rpx;
				border-bottom-right-radius: 6rpx;
			}

			.c {
				background: #3c9cff;
				color: #fff;
			}
		}

		.disC {
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}

	.timeSelect {
		padding: 20rpx 0;

		.li {
			margin-bottom: 40rpx;
			width: 750rpx;
			height: 50rpx;
			display: flex;
			align-items: center;
			padding: 20rpx;
			box-sizing: border-box;


			.lable {
				width: 180rpx;
				height: 50rpx;
				line-height: 50rpx;
				text-align: center;
			}

			.select_time {
				border-radius: 8rpx;
				width: 530rpx;
				height: 58rpx;
				line-height: 50rpx;
				border: 1rpx solid #999;
				padding: 4rpx 20rpx;
				box-sizing: border-box;
			}
		}
	}

	.data_c {
		width: 710rpx;
		background: #e9e9e9;
		display: flex;
		margin: 20rpx auto;
		justify-content: center;
		align-items: center;
		padding: 20rpx 0;

		.li {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			font-size: 26rpx;
			padding: 4rpx 40rpx;
		}
	}
}

.chu_dan {
	margin-top: 20rpx;

	position: relative;
	width: 100%;
	height: 300rpx;
	background: #f9f9f9;

	.item {
		width: 200rpx;
		height: 250rpx;
		position: absolute;
	}

	.one {
		top: 0;
		left: 275rpx;
		display: flex;
		flex-direction: column;
		align-items: center;


		.aravat {
			width: 100rpx;
			height: 100rpx;
			position: relative;

			.aravat_img {
				width: 100rpx;
				height: 100rpx;
			}

			// overflow: hidden;
			.pai {
				width: 40rpx;
				height: 40rpx;
				position: absolute;
				bottom: -20rpx;
				left: 30rpx;
			}
		}

		.name {
			margin: 40rpx 0 10rpx 0;
			font-size: 28rpx;
		}

		.detail {
			font-size: 28rpx;

			.red {
				color: red;
				margin: 0 4rpx;
			}
		}
	}

	.two {
		top: 30rpx;
		left: 20rpx;

		display: flex;
		flex-direction: column;
		align-items: center;


		.aravat {
			width: 100rpx;
			height: 100rpx;
			position: relative;

			.aravat_img {
				width: 100rpx;
				height: 100rpx;
			}

			// overflow: hidden;
			.pai {
				width: 40rpx;
				height: 40rpx;
				position: absolute;
				bottom: -20rpx;
				left: 30rpx;
			}
		}

		.name {
			margin: 40rpx 0 10rpx 0;
			font-size: 28rpx;
		}

		.detail {
			font-size: 28rpx;

			.red {
				color: red;
				margin: 0 4rpx;
			}
		}
	}

	.three {
		top: 30rpx;
		right: 20rpx;

		display: flex;
		flex-direction: column;
		align-items: center;


		.aravat {
			width: 100rpx;
			height: 100rpx;
			position: relative;

			.aravat_img {
				width: 100rpx;
				height: 100rpx;
			}

			// overflow: hidden;
			.pai {
				width: 40rpx;
				height: 40rpx;
				position: absolute;
				bottom: -20rpx;
				left: 30rpx;
			}
		}

		.name {
			margin: 40rpx 0 10rpx 0;
			font-size: 28rpx;
		}

		.detail {
			font-size: 28rpx;

			.red {
				color: red;
				margin: 0 4rpx;
			}
		}
	}
}

.chudan_ul {

	.none {
		display: none !important;
	}

	padding: 20rpx;
	width: 750rpx;

	.chudan_li {
		width: 710rpx;
		border-top: 1rpx solid #000;
		height: 160rpx;
		display: flex;
		align-items: center;
		padding: 50rpx 30rpx;
		box-sizing: border-box;
		position: relative;

		.index {
			color: #999;
			font-size: 24rpx;
		}

		.aravat {
			margin: 0 20rpx 0 20rpx;
			width: 60rpx;
			height: 60rpx;
		}

		.name {}

		.ready {
			position: absolute;
			right: 30rpx;

			.red {
				color: red;
				margin: 0 4rpx;
			}
		}
	}
}

.table {
	padding: 20rpx;

	.th {
		font-size: 30rpx;
		width: 710rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10rpx 0;

		.a {
			width: 270rpx !important;
			text-align: center;
		}

		.td {
			width: 100rpx;
			text-align: center;
		}
	}

	.tr {
		font-size: 26rpx;
		width: 710rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 10rpx;
		box-sizing: border-box;

		.a {
			width: 270rpx !important;
			text-align: center;

		}

		.td {
			width: 100rpx;
			text-align: center;
		}
	}

	.bk {
		background: #e9e9e9;
	}
}
</style>